<template>
	<view class="alert-handling"> 
		<view style="background-color: #FFFFFF;">
			<uni-search-bar v-model="queryParams.params.key" placeholder="搜索" bgColor="#F2F2F2" @blur="inputSearch" />
			<uv-tabs :list="menuList" @click="menuClick">
				<template v-slot:right>
					<view style="padding-left: 4px;" class="search-icon" @tap="toast">
						<image src="../../static/index/筛选.png" mode="scaleToFill" />
					</view>
				</template>
			</uv-tabs>
		</view>
		<view v-if="processList.length !== 0">
			<uni-card :title="item.procVars.reportType" :extra="getStatusText(item.processStatus)" :class="item.processStatus" @click="viewDetail(item)" v-for="(item,index) in processList" :key="index">
				<view class="card_content" v-show="item.processStatus == 'running'">当前节点: {{ item.taskName }}</view>
				<view class="card_content">上报位置: {{item.procVars.reportPosition}}</view>
				<view slot="actions">
					<view class="card_bottom">
						<view class="uni-text-danger">
							<uv-avatar size="20"></uv-avatar>
							<text>{{item.startUserName}}提交</text>
						</view>
						<view>{{item.procVars.reportTime}}</view>
					</view>
				</view>
			</uni-card>
			<uv-divider v-show="!hasMore" text="到底啦~"></uv-divider>
		</view>

		<view v-else>
			<uv-empty text="暂无数据~" width="260" height="260" textSize="16" textColor="#767a82" icon="../../static/index/暂无内容.png"></uv-empty>
		</view>

		<uv-popup ref="searchPpopup" round="10">
			<view class="popup-header"> 
				<uv-text type="primary" text="重置" align="left" @click="resetSearch"></uv-text>
				<uv-text color="#303133" size="16" text="数据筛选" bold align="center"></uv-text> 
				<uv-text type="primary" text="确定" align="right" @click="confirmSearch"></uv-text>
			</view>
			<view class="popup-content">
				<uni-section title="审批状态" type="line">
					<uni-data-checkbox mode="tag" v-model="searchForm.state" :localdata="statusList"></uni-data-checkbox>
				</uni-section>
				<uni-section title="上报类别" type="line">
					<uni-data-checkbox mode="tag" v-model="searchForm.reportType" :localdata="typeList"></uni-data-checkbox>
				</uni-section>
				<uni-section title="时间范围" type="line"> 
					<uni-datetime-picker v-model="range" type="daterange" />
				</uni-section>
			</view>
		</uv-popup>
		<custom-tabBar></custom-tabBar>
	</view>
</template>

<script>
import { getOwnList,getFinishedList } from "@/request/index";
	export default {
		data() {
			return { 
				range: null,
				searchForm: {},
				range: null,
				searchValue: "",
				menuList: [
					{ name: "已发起" },
					// { name: "已处理" },
				],
				statusList: [ 
					{ text: "全部", value: null }, 
					{ text: "进行中", value: "running" }, 
					{ text: "已完成", value: "completed" }, 
					{ text: "已终止", value: "terminated" }, 
					{ text: "已取消", value: "canceled" }, 
				],
				typeList: [ 
					{ text: "全部", value: null }, 
					{ text: "设备故障", value: "设备故障" }, 
					{ text: "水情雨情报警", value: "水情雨情报警" }, 
					{ text: "非法活动", value: "非法活动" }, 
					{ text: "生态卫生异常", value: "生态卫生异常" }, 
					{ text: "险情处置", value: "险情处置" },  
				],
				activeMenu: "待处理",
				processList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,  
					params: {}
				}
			}
		},
		onShow() {
			this.processList = [];
			this.getList();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: { 
			getList() {
				if (this.loading) return; 
				this.loading = true; 
				let _this = this;
				if(JSON.stringify(this.searchForm) !== '{}'){
					_this.queryParams.params = {...this.searchForm}
					_this.queryParams.state = this.searchForm.state || "";
				} 
				getOwnList({..._this.queryParams}).then(res => {  
					res.rows.forEach(item => {
						this.processList.push({...item,procVars: item.procVars? item.procVars: {}}) 
					});

				}).finally(() => {
					this.loading = false;  
				})
				// getFinishedList({pageNum:1, pageSize:10}).then(res => {
				// 	console.log(res)
				// 	res.rows.forEach(item => {
				// 		this.processList.push({...item,procVars: item.procVars? item.procVars: {}})
				// 	});
				// })
			},
			viewDetail(item){ 
				let _this = this;
				_this.$store.commit("setFormData", item.procVars);
				_this.$store.commit("setCommentList", item.commentList);
				const { procInsId,taskId } = item;
				uni.navigateTo({
					url: `/pages/operationRecord/detail?procInsId=${procInsId}&taskId=${taskId}`
				}); 
			},
			confirmSearch(){
				let _this = this; 
				if(_this.range && _this.range.length){
					_this.searchForm.beginTime = _this.range[0] + " 00:00:00";
					_this.searchForm.endTime = _this.range[1] + " 23:59:59"; 
				}
				if(JSON.stringify(_this.searchForm) !== '{}'){
					_this.processList = [];
					_this.$nextTick(()=>{ 
						_this.getList();
					})
				}
				this.$refs.searchPpopup.close(); 
			},
			toast(){
				this.$refs.searchPpopup.open('bottom'); 
			},
			resetSearch(){ 
				this.searchForm = {};
				this.range = null;
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,  
					params: {}
				}; 
				this.processList = [];
				this.getList();
			},
			menuClick(item) {
				this.activeMenu = item.name;
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,  
					params: {}
				}; 
				this.processList = [];
				this.getList();
            },
			search(res){
				console.log(res);
				
			},
			
			getStatusText(status) {
				switch (status) {
					case "running":
						return "进行中";
					case "completed":
						return "已完成";
					case "terminated":
						return "已终止";
					case "canceled":
						return "已取消";
					default:
						return "进行中";
				}
			},
			inputSearch(){
				this.processList = [];
				this.getList(); 
			},
			loadMore() { // 添加: 加载更多数据的方法
				if (!this.hasMore || this.loading) return;
				this.queryParams.pageNum += 1;
				this.getList();
			}
		}
	}
</script>


<style lang="scss">   
/deep/ .running  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{ 
	color: green;
}
	

/deep/ .completed  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{
	color: orange;
}
/deep/ .terminated  .uni-card__header .uni-card__header-extra .uni-card__header-extra-text{
	color: red;
}
.alert-handling{
	/deep/.uni-card__header{
		border-bottom: none !important;
		padding-bottom: 0;
		font-weight: bold;
	}
	/deep/ .uni-card__actions{ 
		padding-bottom: 10px;
	}
	.card_content{
		color: #969696;
	}
	.card_bottom,.uni-text-danger{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.8rem;
		color: #828282;
	}
	.uni-text-danger{
		text{
			padding-left: 0.4rem;
		}
	}

	.search-icon{ 
		padding-top: 10px;
		image{
			width: 1.4rem;
			height: 1.6rem;
			margin-right: 0.4rem;
		}
	}

	.popup-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		.uv-text{
			text-align: center;
		}
	}

	.popup-content{ 
		padding: 0 1rem 73px 1rem;
		/deep/ .uni-section-header{
			padding-left: 0;
		}
	}
	
}

</style>